

<template>
  <el-card>
    <el-form :inline="true" :model="qureyData" ref="from">
      <el-row type="flex" justify="space-between" label-width="80px">
        <el-form-item label="目录名称">
          <el-input
            size="small"
            v-model="qureyData.directoryName"
            style="width: 180px"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" @click="reset">清除</el-button>
          <el-button size="small" type="primary" @click="search"
            >搜索</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button
            @click="$router.go(-1)"
            v-show="this.qureyData.subjectID"
            type="text"
            ><i class="el-icon-back"></i> <span>返回学科</span></el-button
          >

          <el-button @click="btnOK" size="small" type="success"
            ><i class="el-icon-edit"></i><span>新增学科</span></el-button
          >
        </el-form-item>
      </el-row>

      <el-form-item label="状态" label-width="70px">
        <el-select size="small" placeholder="请选择" v-model="qureyData.state">
          <el-option label="已启用" value="1"> </el-option>
          <el-option label="已禁用" value="0"> </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <page-tools :text="`数据一共${counts}条`"></page-tools>

    <!-- 表单 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="subjectName" label="所属学科" width="100">
      </el-table-column>
      <el-table-column prop="directoryName" label="目录名称" width="120">
      </el-table-column>

      <el-table-column prop="username" label="创建者" width="120">
      </el-table-column>
      <el-table-column prop="addDate" label="创建日期" width="180">
        <template slot-scope="{ row }">
          <span>{{ $dayJs(row.addDate).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totals" label="面试数量" width="150">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="140">
        <template slot-scope="{ row }">
          {{ row.state === 1 ? "已启用" : "已禁用" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" sortable="" fixed="right" width="150">
        <template slot-scope="{ row }">
          <el-button
            @click="clickBtn(row)"
            v-if="row.state === 0"
            type="text"
            size="small"
            >禁用
          </el-button>

          <el-button
            @click="clickBtn(row)"
            v-if="row.state === 1"
            type="text"
            size="small"
            >启用
          </el-button>
          <el-button
            :disabled="row.state === 0"
            type="text"
            size="small"
            @click="editSub(row.id)"
            >修改</el-button
          >
          <el-button
            :disabled="row.state === 0"
            type="text"
            size="small"
            @click="delSub(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="qureyData.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="qureyData.pagesize"
        layout="prev, pager, next, sizes,jumper"
        :total="counts"
      >
      </el-pagination>
    </el-row>
    <addSub :id="id" ref="from" @btnK="butK"></addSub>
  </el-card>
</template>

<script>
import {
  stateApi,
  XdirectorysApi,
  deldirectorysApi,
  directorysList,
} from "@/api/directorys";
import addSub from "./components/addSub";
export default {
  name: "ListPages",
  components: { addSub },
  data() {
    return {
      qureyData: {
        directoryName: "",

        page: 1,
        pagesize: 5,
      },
      formData: {
        state: "",
      },
      id: this.$route.query.id,
      list: [],
      counts: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      if (this.$route.query.id) {
        this.qureyData.subjectID = this.id;
        let { counts, items } = await directorysList(this.qureyData);
        this.counts = counts;
        this.list = items;
      } else {
        let { counts, items } = await directorysList(this.qureyData);
        console.log(counts, items);
        this.counts = counts;
        this.list = items;
      }
    },

    handleSizeChange(val) {
      this.qureyData.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.qureyData.page = val;
      this.initData();
    },
    async clickBtn(val) {
      if (val.state === 1) {
        val.state = 0;
      } else {
        val.state = 1;
      }
      await stateApi({ id: val.id, stae: val.state });
      this.$message.success("切换成功");
    },
    search() {
      this.initData();
    },
    reset() {
      this.qureyData = {};
      this.initData();
    },
    btnOK() {
      this.$refs.from.dialogVisible = true;
    },
    butK() {
      this.initData();
    },

    async editSub(id) {
      this.$refs.from.dialogVisible = true;
      let data = await XdirectorysApi(id);
      console.log(data);
      this.$refs.from.formData = data;
    },

    async delSub(id) {
      await this.$confirm("确认删除吗");
      await deldirectorysApi(id);
      this.$message.success("删除成功");
      if (this.qureyData.page > 1 && this.list.length === 1) {
        this.qureyData.page--;
      }
      this.initData();
    },
  },
};
</script>

<style>
.bot {
  margin-left: 27px;
}
</style>